<template>
	<div>
		<header>
			<div class="place"><span class="icon-map-marker"></span>{{place.address}}</div>		
			<div class="weather"><span>{{weather.description}}</span><br /><span>{{weather.temperature}}℃ </span></div>		
			<div style="clear: both;"></div>
			<input type="text" placeholder="搜索商家、商品"/>
		</header>
		<nav>
			<scroller lock-y :scrollbar-x=false>
				<ul class="box1">
					
						<li v-for="nav in navlist">
							<router-link :to="'/selllist/' + nav.title+nav.id"><img :src="'https://fuss10.elemecdn.com'+nav.image_url"/></router-link>
							<p>{{nav.title}}</p>
						</li>
					
				</ul>
			</scroller>
		</nav>
		<section id="content">
			<div id="title">推荐商家</div>
			<ul>
				<li v-for="s in shop">
					<router-link :to="'/sell/' + s.id"><div class="shopLeft" :style="{backgroundImage: 'url(http://fuss10.elemecdn.com/' + jpeg(s.image_path) + ')'}"></div></router-link>
					<router-link :to="'/sell/' + s.id"><div class="shopCenter">
						<p><span>品牌</span>{{s.name}}</p>
						<p>月售{{s.float_minimum_order_amount}}单</p>
						<p>{{s.average_cost}}(配送费￥4/人)</p>
					</div></router-link>
					<div class="shopRight">
						<p v-show="s.is_premium">保</p>
						<p>{{s.distance}}m/<span>{{s.order_lead_time}}分钟</span></p>
					</div>
				</li>
			</ul>
		</section>
		<a class="gotop" @click="gotop"><span class=" icon-upload"></span></a>
		<p style="text-align: center;margin-bottom: 30px;"><i class="icon-spinner">正在加载更多商家</i></p>
		<div style="height: 26px;"></div>
	</div>
</template>

<script type="text/javascript">
	import { Search, Scroller} from 'vux'
	import $ from '../../assets/jquery.js'
	import '../../assets/Font-Awesome-3.2.1/css/font-awesome.min.css'
	import axios from 'axios'

	export default{		
		name:'sell',
		data:function(){
			return{
				place:{},
				weather:{},
				navlist:{},
				shop:[],
				isLoaded:false
			}
		},
		components: {
	    	Search,Scroller
  		},
  		methods:{
  			jpeg:function(value){
  				var out 				
  				var result = value.substring(value.length-3)
  				if(result == 'peg'){
  					out = value + '.jpeg'
  				}else{
  					out = value + '.png'
  				}
  				var result1 = out.substring(0,1) + '/' + out.substring(1,3) + '/' + out.substring(3)
  				return result1
  			},
  			gotop:function(){
//				document.documentElement.scrollTop = document.body.scrollTop =0;
     			 $("html,body").animate({scrollTop:0}, 500);
  			},
  			loadmore:function(){ 			
  				axios.get('https://mainsite-restapi.ele.me/shopping/restaurants?latitude=31.32226&longitude=121.49564&offset='+ this.shop.length + '&limit=10&extras[]=activities&terminal=h5')
				.then(function(res){
					console.log(res)
					this.isLoaded =false
					this.shop = this.shop.concat(res.data)
				}.bind(this))
				.catch(function(error){
					this.isLoaded =false
					console.log(error)
				})
  			}
  		},
		created:function(){
			axios.get('https://mainsite-restapi.ele.me/v2/pois/ww0tr3zyd')
			.then(function(res){
				this.place = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//获取天气信息
			axios.get('https://mainsite-restapi.ele.me/bgs/weather/current?latitude=34.6836&longitude=113.5325')
			.then(function(res){
				this.weather = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//获取类别信息
			axios.get('https://mainsite-restapi.ele.me/v2/index_entry?geohash=ww0tr3zyd&group_type=1&flags[]=F')
			.then(function(res){
				this.navlist = res.data		
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//获取商家信息
			axios.get('https://mainsite-restapi.ele.me/shopping/restaurants?latitude=34.6836&longitude=113.5325&offset=0&limit=10&extras[]=activities&terminal=h5')
			.then(function(res){
				console.log(res)
				this.shop = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
		},
		mounted:function(){
			window.onscroll = function(){
				//如果为true 直接返回
				if(this.isLoaded){
					return
				}
				//body的内容高度
				var scrollHeight = document.body.scrollHeight;
				//竖直方向滚动的距离
				var  top = document.body.scrollTop;
				//客户区的高度
				var height = document.documentElement.clientHeight
				if(height + top >=scrollHeight-10){
					this.isLoaded =true
					this.loadmore()
					console.log('到底了')
				}
			}.bind(this)
		}
	}
</script>
<style scoped="">
	*{box-sizing: border-box;overflow-x:hidden ;}
	body{background-color:#f4f4f4 ;min-width: 400px;}
	header{width: 100%;height: 106px;background: #0398ff;border: 1px solid transparent;color: white;}
	.place{width: 180px;height: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: 10px 15px;float: left;}
	nav{height:176px ;width: 100%;background: white;border-bottom:1px solid  #eeeeee;}
	.weather{float: right;margin-top: 15px;margin-right:10px;font-size: 12px;}
	header input{width: 80%;height: 30px;margin: auto;display: block;border-radius:20px ;border: 0px;padding: 20px;text-align: center;outline: none;}
	nav{color: #666666;font-size: 15px;}
	nav ul{display: flex; flex-wrap: wrap;justify-content:flex-start;width: 125%;flex-direction:column;height: 170px;}
	nav li{width: 100px;height:85px;list-style: none;text-align: center;}
	nav li img{width: 50px;height: 50px;}
	/*推荐商家*/
	#content{margin-top:10px ;width: 100%;background: white;}
	#title{width: 100%;height: 34px;line-height: 34px;padding-left:20px ;border-bottom:1px solid #eeeeee;}
	.shopLeft {width: 90px;height: 90px;background-size:100% ;}
	.shopCenter{width: 40vw;height: 90px;}
	.shopRight{width: 30vw;height: 90px;text-align: right;}
	#content li{width: 90%;display: flex;justify-content:center;margin: 30px 0px;}
	/*商家li 内部信息样式*/
	.shopCenter p:nth-of-type(1){font-size: 16px;font-family: '黑体';font-weight: 800;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
	.shopCenter p:nth-of-type(1) span{background: #ffd930;color: #52250a;font-size: 14px;width: 35px;display: inline-block;text-align: center;border-radius:5px ;margin: 0px 5px;}
	.shopCenter p:nth-of-type(2),.shopCenter p:nth-of-type(3){font-size: 14px;padding-left:10px ;color: #666666;}
	.shopRight p:nth-of-type(1){border: 1px solid #666666;color: #666666;display: inline-block;border-radius:5px ;height: 27px;width: 25px;text-align: center;}
	.shopRight p:nth-of-type(2){font-size: 12px;height:50px;line-height: 50px;color: #48acff;}
	
	/*回到顶部*/
	.gotop{position: fixed;bottom: 60px;right: 20px;font-size: 60px;opacity: 0.3;color: black;}
</style>